<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="forgetPassWord">
  <div class="loginBody">
    <div class="forgetPassowrd">
      <div class="loginTitle">
        忘记密码
      </div>
      <div class="loginDiv">
        <el-row class="login">
          <div class="grid-content bg-purple"> &nbsp </div>
          <div class="grid-content bg-purple-light">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="手机号码" prop="acct" class="inputLable firstLine">
                <el-input v-model="form.acct" placeholder="请输入11位手机号" required="required" class="inputStyle"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="phoneCode">
                <el-input v-model="form.phoneCode" placeholder="请输入验证码" required="required" width="50%" class="inputShortStyle"></el-input>
                <el-button  type="warning" @click="sendMsgCoce" id="yzmButton" class="yzmButton" :disabled="this.getPhoneCodeDisabled">{{this.getPhoneCodeMsg}}</el-button>
              </el-form-item>
              <el-form-item label="新密码" prop="password" class="inputLable">
                <el-input v-model="form.password" placeholder="请输入新密码" type="password" class="inputStyle"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" prop="passwordConfirm" class="inputLable">
                <el-input v-model="form.passwordConfirm" placeholder="请输入新密码" type="password" class="inputStyle"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="auth" class="confirmButton">确认修改</el-button>
                <div class="goBackDiv">
                  <span :plain="true"  @click="goBack" class="loginBackSpan">返回登录</span>
                </div>
              </el-form-item>


              <el-form-item>
                <el-alert
                  v-bind:title="msg"
                  v-bind:type="isAlert ? 'error' : 'success'"
                  v-if="show">
                </el-alert>
              </el-form-item>

            </el-form>
          </div>
          <div class="grid-content bg-purple"> &nbsp </div>
        </el-row>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import md5 from 'blueimp-md5'
  import uuid from 'uuid-js'

  export default {
    components: {
    },
    data () {
      let validateAcct = (rule, value, callback) => {
        let regExp = /^\d{11}$/;
        this.getPhoneCodeDisabled = true;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入手机号'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          return callback(new Error('手机号格式不正确，请重新输入'));
        }else{
          this.acctIsValidated = true;
          this.getPhoneCodeDisabled = false;
          return callback();
        }
      };
      let validateConfirmPass = (rule, value, callback) => {
        let regExp = /^(?![0-9]+$)(?![A-Za-z]+$)[A-Za-z0-9]{6,12}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入密码'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          return callback(new Error('密码格式不正确，请输入6-12位密码，必须字母加数字'));
        }else if(this.form.password != this.form.passwordConfirm) {
          this.isValidated = false;
          return callback(new Error("两次输入的密码不一致，请重新输入"));
        }else {
          return callback();
        }
      };
      let validateNewPass = (rule, value, callback) => {
        let regExp = /^(?![0-9]+$)(?![A-Za-z]+$)[A-Za-z0-9]{6,12}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入密码'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          return callback(new Error('密码格式不正确，请输入6-12位密码，必须字母加数字'));
        }else{
          return callback();
        }
      };
      let validatePhoneCode = (rule, value, callback) => {
        let regExp = /^\d{6}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入短信验证码'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          return callback(new Error('短信验证码格式不正确，请重新输入'));
        }else{
          return callback();
        }
      };
      return {
        msg: '',
        show: false,
        isAlert: false,
        isValidated: false,
        isDebug: true,
        acctIsValidated: false,
        getPhoneCodeMsg:'获取验证码',
        getPhoneCodeDisabled:true,
        form: {
          acct: '',
          password: '',
          passwordConfirm:'',
          phoneCode: ''
        },
        rules: {
          acct: [
            {validator:validateAcct,trigger:'blur'},
          ],
          password: [
            {validator:validateNewPass,trigger:'blur'},
          ],
          passwordConfirm: [
            {validator:validateConfirmPass,trigger:'blur'}
          ],
          phoneCode: [
            {validator:validatePhoneCode,trigger:'blur'}
          ]
        }
      }
    },
    created: function () {
    },
    methods: {
      goBack(){
        this.$emit('loginShow');
      },
      showMsg: function (msg, isAlert) {
        this.msg = msg;
        this.show = true;

        if (this.isDebug) {
          console.log('isAlert : ' + isAlert);
        }
        if (isAlert) {
          this.isAlert = true;
        } else {
          this.isAlert = false;
        }
        setTimeout(function () {
          this.show = false;
        }.bind(this), 3000);
      },
      getyzm(){
      },
      sendMsgCoce(){
        var url = '/api-hks/v1/userInfo/getMsgCode?mobile=' + this.form.acct + "&ifJG=1&channel=1";
        this.$http.get(url).then(
          response => {
            var data = response.body;
            console.log("data = " + JSON.stringify(data));
            console.log("resultCode = " + data.resultCode);
            if (data.resultCode === "200") {
              this.showMsg('短信验证码发送成功');
              this.getPhoneCodeDisabled = true;
            }else{
              this.showMsg('验证码发送失败', true);
              return;
            }
          });
        console.log("first iteTime = " + this.iteTime);

        let _this = this;
        let iteTime = 120;
        let itv = setInterval(function () {
          iteTime = iteTime - 1;
          _this.getPhoneCodeMsg = iteTime + "S";
          if(iteTime < 0) {
            clearInterval(itv);
            _this.getPhoneCodeDisabled = false;
            _this.getPhoneCodeMsg = "获取验证码";
          }
        }, 1000)
      },
      auth () {
        this.isValidated = true;
        console.log("in confirmChange method");
        this.validateForm();
        console.log("this.isValidated = " + this.isValidated);
        if (!this.isValidated) {
          return;
        }
        var parms = {
          "pwd": md5(this.form.password),
          "verifyCode": this.form.phoneCode
        };

        var authUrl = '/api-web/v1/api/auth/user/' + this.form.acct+ "/pwd/forget";
        this.$http.post(authUrl, parms).then(
          response => {
            var data = response.body;
            if (data.resultCode !== '200') {
              this.showMsg(data.result, true);
              return;
            }else{
              this.showMsg("密码重置成功！");
              let _this = this;
              setTimeout(function() {
                  _this.goBack();
                  }, 2000);
            }
          });
      },
      validateForm () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.isValidated = true;
          } else {
            this.isValidated = false;
          }
        });
      },
      resetForm () {
        this.$refs['form'].resetFields();
      }
    }
  }
</script>
<style lang="less">
  #forgetPassWord {
      .forgetPassowrd {
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -267px;
        margin-top: -237px;
      }

      .forgetPassowrd .el-button{
        border: 0;
      }

      .loginDiv {
        width: 534px;
        height: 410px;
        background-color: RGBA(34, 34, 34, 0.3);
        border: 2px;
        border-color: #000000;
        border-radius: 12px;
        padding-top: 30px;
        padding-bottom: 40px;

      }

      .loginBody {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        background: url("../../assets/images/login_back.jpg") no-repeat;
        background-size: cover;
      }

      .loginTitle {
        font-size: 30px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        margin-bottom: 30px;
      }

      inputLable {
        width: 100px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;

      }

      .inputStyle {
        width: 302px;
        height: 38px;
        border: 1px;
        border-color: #ffffff;
        border-radius: 3px;
        margin-left: 20px;
        color: #222222;
      }

      .inputShortStyle {
        width: 182px;
        height: 38px;
        border: 1px;
        border-color: #ffffff;
        border-radius: 3px;
        margin-left: 20px;
        color: #222222;
      }

      .confirmButton {
        font-size: 16px;
        color: #ffffff;
        background-color: #f7931e;
        margin: 0px;
        text-align: center;
        margin-left: 150px;
        width: 302px;
        &:hover{
          background-color: #db7c1d;
        }
      }

      .yzmButton {
        width: 100px;
        height: 34px;
        margin-left: 15px;
        background-color: #f7931e;
        &:hover {
          background-color: #db7c1d;
        }
      }

      .loginBackSpan {
        color: #ffffff;
        cursor: pointer;
      }

      .goBackDiv {
        margin-left: 150px;
        margin-bottom: 20px;
        font-size: 14px;
      }
  }

 
</style>
